import ArkTipType from "../../common-type/ark-tip-type";
import ArkInteractionType from "../../common-type/ark-interaction-type";
import dayjs from "dayjs";
import ArkFilterForm from "../ark-filter-form/ArkFilterForm.vue";
import {ArkFilterFormOptions} from "../ark-filter-form/ArkFilterFormOptions";
import {ElMessage} from "element-plus";

export default {
  title: 'ark-component-v2/ArkFilterForm',
  component: ArkFilterForm,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">ArkForm</span> 使用`
      }
    }
  },
  argTypes: {
    options: {description: 'ArkFilterFormOptions'},
    default: {description: '表单内容部分'},
    '\'formItem-\' + item.prop': {description: '表单项内容部分，参数为model、formItem'},
    '\'formItemLabel-\' + item.prop': {description: '表单项名称部分，参数为model、formItem'},
    '\'formItemInteraction-\' + item.prop': {description: '表单项组件部分，参数为model、formItem'},
  }
};

export const Basic = {
  name: '基本使用',
  render: (args: ArkFilterFormOptions) => ({
    components: {ArkFilterForm},
    setup() {
      return {args};
    },
    template: `
      <ArkFilterForm v-model:options="args.options"></ArkFilterForm>
    `,
  }),
  args: {
    options: {
      formItems: [
        {
          label: '姓名',
          prop: 'name',
          tip: {
            title: '提示标题',
            content: '提示内容',
            type: ArkTipType.WARNING,
          },
        },
        {
          label: '性别',
          prop: 'sex',
          interaction: {
            type: ArkInteractionType.SELECT,
            options: [
              {text: '男', value: 'nan'},
              {text: '女', value: 'nv'},
            ],
          }
        },
        {
          label: '角色',
          prop: 'role',
          value: '',
          interaction: {
            type: ArkInteractionType.SELECT,
            options: () => {
              return Promise.resolve([
                {text: '管理员', value: 'admin'},
                {text: '医生', value: 'docter'},
                {text: '老师', value: 'teacher'},
                {text: '学生', value: 'student'},
              ])
            },
            extraAllOptionForAsync: true
          }
        },
        {
          label: '年龄',
          prop: 'age',
          value: 10,
          interaction: {
            type: ArkInteractionType.NUMBER,
            min: 0,
            max: 100,
            step: 10
          }
        },
        {
          label: '日期',
          prop: 'date',
          value: dayjs().format('YYYY-MM-DD'),
          interaction: {
            type: ArkInteractionType.DATE,
            valueFormat: 'YYYY-MM-DD',
            showFormat: 'YYYY~MM~DD',
          }
        },
      ],
      actions: {
        show: true,
        confirm: {
          show: true,
          beforeClick: () => {
            ElMessage({
              message: '按钮点击之前的操作，无参数',
              type: 'success',
            });
          },
          onClick: (params) => {
            ElMessage({
              message: '按钮点击操作，参数请看控制台打印',
              type: 'success',
            });
            console.log(params)
          },
          afterClick: (clickReturn: void | Promise<any>) => {
            ElMessage({
              message: '按钮点击之后的操作，参数请看控制台打印',
              type: 'success',
            });
            console.log(clickReturn)
          },
        },
        clear: {
          show: true,
          beforeClick: () => {
            ElMessage({
              message: '按钮点击之前的操作，无参数',
              type: 'success',
            });
          },
          onClick: () => {
            ElMessage({
              message: '按钮点击操作，无参数',
              type: 'success',
            });
          },
          afterClick: (clickReturn: void | Promise<any>) => {
            ElMessage({
              message: '按钮点击之后的操作，参数请看控制台打印',
              type: 'success',
            });
            console.log(clickReturn)
          },
        }
      },
    }
  },
};